<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    function carousel(arr) {
        var carouselWrap = document.querySelector("#carousel-wrapper");
        var indexCircle = document.querySelector("#indexCircle");
        var ulNode = document.createElement("ul");

        //  添加节点
        addStructure();
        function addStructure() {
            arr = arr.concat(arr)
            for (let i = 0; i < arr.length; i++) {
                ulNode.innerHTML += `
                    <li>
                        <a href="#">
                            <img src="${arr[i]}" alt=""/>
                        </a>
                    </li>`
            }
            //  给ul节点添加类目list
            ulNode.classList.add("list")
            //  等调接口进行响应式获取
            let styleNode = document.createElement("style");
            styleNode.innerHTML = `
                .list {
                    width: ${arr.length * 100}vw;
                }
            `
            document.head.appendChild(styleNode)
            carouselWrap.appendChild(ulNode)
        }
        // 事件在carouselWrap上滑动, 让ul的offsetWidth进行变化
        var list = document.querySelector(".list");

    }
</script>
</html>